<template>
  <view class="container">
    <view class="avatar">
      <!-- 上传组件 -->
      <u-upload
        ref="product_img"
        name="product_img"
        :maxCount="6"
        :fileList="filelist"
        width="100"
        height="100"
        @delete="del"
        @afterRead="read"
      />
    </view>

    <view class="content">
      <u-form
        labelPosition="left"
        labelWidth="60"
        :model="prolist"
        :rules="rules"
        ref="product"
      >
        <!-- 部门 -->
        <u-form-item
          label="门店"
          prop="store"
          borderBottom
          @click="showstore = true"
        >
          <u-input
            v-model="prolist.store.name"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择所属门店"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          label="商品分类"
          prop="store"
          borderBottom
          @click="showtype = true"
        >
          <u-input
            v-model="prolist.typename_text"
            disabled
            inputAlign="center"
            disabledColor="#ffffff"
            placeholder="请选择商品所属分类"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 品牌 -->
        <u-form-item
          label="品牌"
          prop="brank"
          borderBottom
          @click="showbrank = true"
        >
          <u-input
            v-model="prolist.brank.name"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择品牌"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-form-item
          label="系列"
          prop="branktype"
          borderBottom
          @click="showbranktype = true"
        >
          <u-input
            v-model="prolist.btypename"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择系列"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
           <u-form-item
          label="推荐栏:  "
          borderBottom
          @click="showsellcolumn = true"
        >
          <u-input
            v-model="prolist.sellcolumn_text"
             inputAlign="center"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择是否推荐"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 名称 -->
        <u-form-item label="型号" prop="model">
          <u-input
            v-model="prolist.model"
            
            placeholder="请输入手表型号"
          />
        </u-form-item>
        <u-form-item label="表壳直径" prop="bkzj">
          <u-input
            v-model="prolist.bkzj"
            placeholder="请输入表壳直径"
          />
        </u-form-item>
        <u-form-item label="表壳厚度" prop="bkhd">
          <u-input
            v-model="prolist.bkhd"
            placeholder="请输入表壳厚度"
          />
        </u-form-item>
        <u-form-item label="表壳材质" prop="bkcz">
          <u-input
            v-model="prolist.bkcz"
            placeholder="请输入表壳材质"
          />
        </u-form-item>
        <u-form-item label="表带材质" prop="bdcz">
          <u-input
            v-model="prolist.bdcz"
            placeholder="请输入表带材质"
          />
        </u-form-item>
        <u-form-item label="机芯类型" prop="jxtype">
          <u-input
            v-model="prolist.jxtype"
            placeholder="请输入手表机芯类型"
          />
        </u-form-item>
        <u-form-item label="防水深度" prop="fssd">
          <u-input
            v-model="prolist.fssd"
            placeholder="请输入防水深度"
          />
        </u-form-item>

          <!-- 全款 -->
        <u-form-item label="官方售价" prop="price">
          <u-input
            v-model="prolist.price"
            placeholder="请填写官方售价"
          />
        </u-form-item>
        <!-- 商品描述 -->
        <u-form-item label="简介" prop="description" borderBottom>
          <u-textarea
            placeholder="不低于3个字"
            v-model="prolist.description"
            count
          ></u-textarea>
        </u-form-item>

      
      
        <u-form-item label="视频上传:">
          <view class="vedio">
            <!-- 上传组件 -->
            <u-upload
              name="vedio"
              accept="video"
              :maxCount="1"
              :filelist="vediolist"
              width="100"
              height="100"
              @delete="delvedio"
              @afterRead="readvedio"
            />
          </view>
        </u-form-item>
        <u-action-sheet
          :show="showstore"
          :actions="stolist"
          title="请选所属的门店"
          @close="showstore = false"
          @select="storeSelect()"
        >
        </u-action-sheet>
        <u-action-sheet
          :show="showtype"
          :actions="protypedata"
          title="请选所属商品分类"
          @close="showtype = false"
          @select="protypeSelect()"
        >
        </u-action-sheet>
        <u-action-sheet
          :show="showsellcolumn"
          :actions="sellcolumnlist"
          title="请选择是否为推荐"
          @close="showsellcolumn = false"
          @select="sellcolumnSelect()"
        >
        </u-action-sheet>
        <u-action-sheet
          :show="showbrank"
          :actions="branklist"
          title="请选所属品牌"
          @close="showbrank = false"
          @select="brankSelect()"
        >
        </u-action-sheet>

        <u-action-sheet
          :show="showbranktype"
          :actions="btypelist"
          title="请选所系列"
          @close="showbranktype = false"
          @select="branktypeSelect()"
        >
        </u-action-sheet>
        <!-- 提交按钮 -->
        <u-button
          text="添加商品"
          icon="pushpin"
          size="small"
          type="primary"
          :customStyle="btnStyle"
          @click="product"
        />
      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
  
<script>
export default {
  onLoad(options) {
    this.auth = this.$u.auth.check();

    this.ptypeid = options.ptypeid ? options.ptypeid : 0
    this.brand_id = options.brand_id ? options.brand_id : 0
    this.btypeid = options.btypeid ? options.btypeid : 0
    console.log(options)

    

    this.brank();

    this.storelist();
    this.getbranktype();
    this.getproducttype();
  },

  onReady() {
    this.$refs.product.setRules(this.rules);
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
       sellcolumnlist:[
        {
            sellcolumn:0,
            name:"正常"
        },
        {
          sellcolumn:1,
          name:"推荐"
        }
      ],
      showtype:false,
      showsellcolumn:false,
      showbranktype: false,
      protypedata:[],
     
      filelist: [],
   
      showstore: false,
      vediolist: [],
      auth: {},
      proid: 0,
      protype:[],
      branklist: [],
      brank_text: "",
      store_text: "",
      stolist: [],
      brand_id:0,
      stoid: null,
      product_img: "",
      piclist: [],
      btypelist: [],
      prolist: {
        brank: {
          name: "",
        },
        store: {
          name: "",
        },
        fssd:"",
        bdcz:"",
        brand_id:"",
        btypeid:"",
        bkhd:"",
        jxtype:"",
        model:"",
        bkzj:"",
        ptypeid:"",
        btypeid: 0,
        vedio_text: "",
        sellcolumn:""
      },
      showbrank: false,
     
      vedio: "",
      description: "",
      price: 0,

      rules: {
        description: {
          required: true,
          message: "不低于3个字",
          trigger: ["change"],
        },
        "store.name": {
          required: true,
          message: "请选择你所属的门店",
          trigger: ["blur", "change"],
        },
        "brank.name": {
          required: true,
          message: "请选择你所属的品牌",
          trigger: ["blur", "change"],
        },
        "btype.name": {
          required: true,
          message: "请选择你所属的品牌系列",
          trigger: ["blur", "change"],
        },
        name: {
          required: true,
          message: "请填写商品名称",
          trigger: ["blur", "change"],
        },

        price: {
          required: true,
          message: "请填写官方售价",
          trigger: ["blur", "change"],
        },

        model: {
          required: true,
          message: "请填写手表型号",
          trigger: ["blur", "change"],
        },
        jxtype: {
          required: true,
          message: "请填写机芯类型",
          trigger: ["blur", "change"],
        },
        bkzj: {
          required: true,
          message: "请填写手表直径",
          trigger: ["blur", "change"],
        },
        bkhd: {
          required: true,
          message: "请填写表壳厚度",
          trigger: ["blur", "change"],
        },
        bkcz: {
          required: true,
          message: "请填写表壳材质",
          trigger: ["blur", "change"],
        },
        bdcz: {
          required: true,
          message: "请填写表带材质",
          trigger: ["blur", "change"],
        },
        fssd: {
          required: true,
          message: "请填写防水深度",
          trigger: ["blur", "change"],
        },
       
  
      

     
        
      },
    };
  },

  methods: {

    async getproducttype()
    {
      let data = {
        adminid:this.auth.id
      }

      let result = await this.$u.api.product.getprotypedata(data)

      if(result.code)
      {

        this.protypedata = result.data

      }
    },
    async getbranktype(e) {
      let data = {
        adminid: this.auth.id,
        brand_id:e
      };

      let result = await this.$u.api.product.getbtypelist(data);

      if (result.code) {
        this.btypelist = result.data;
      }
    },
    //
    branktypeSelect(e) {
      this.prolist.btypename = e.name,
      this.prolist.btypeid = e.id
    },
    protypeSelect(e) {
      this.prolist.typename_text = e.name,
      this.prolist.ptypeid = e.id
    },

    del(e) {
      let list = this.filelist.map(async (item, index) => {
        // this.filelist(index, 1)

        if (index == e.index) {
          // 删除数组中的某一项

          this.filelist.splice(e.index, index);
          let data = {
            proid: this.proid,
            product_img: e.file.url,
          };
          var result = await this.$u.api.product.delthumb(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 2000,
              complete: () => {
                // 还剩余一张的时候清空
                if (this.filelist.length == 1) {
                  this.filelist = [];
                }
              },
            });
            return false;
          }
        }
      });
    },
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
        formData: {
          proid: this.proid,
        },
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.filelist = this.filelist.concat({ url: result.data });

        //修改本地存储中的图像内容
        // this.product_img = result.data;

        // 合并对象

        // this.imageslist = []
        //  this.imageslist =  this.imageslist.concat({product_img:result.data})

        let userArray = Object.entries(this.filelist).map(([key, value]) => {
          return { value };
        });

        userArray.forEach((item) => {
          // 把想要的路径追加到数组
          this.piclist.push(item.value.url);
        });

        // 数组的去重
        let qcarr = [...new Set(this.piclist)];

        // 数组转化成字符串
        this.prolist.product_img = qcarr.join(",");
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    async readvedio(item) {
      //组装上传数据
      var data = {
        filePath: item.file.url,
        name: "vedio",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.vedioupload(data);

      if (result.code) {
        this.vediolist = [{ url: result.data }];

        //修改本地存储中的图像内容
        this.prolist.vedio = result.data;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    sellcolumnSelect(e) {
      this.prolist.sellcolumn_text = e.name;
      this.prolist.sellcolumn = e.sellcolumn;
    },
    brankSelect(e) {
      this.prolist.brank.name = e.name;
      this.prolist.brand_id = e.id;
      this.getbranktype(e.id)
    },
    storeSelect(e) {
      this.prolist.store.name = e.name;
      this.stoid = e.id;
    },
    product() {
      this.$refs.product
        .validate()
        .then(async () => {
          let data = {

            name:this.prolist.name,
            jxtype:this.prolist.jxtype,
            stoid:this.stoid,
            bkcz:this.prolist.bkcz,
            product_img:this.prolist.product_img,
            bkhd:this.prolist.bkhd,
            bkzj:this.prolist.bkzj,
            price:this.prolist.price,
            brand_id:this.prolist.brand_id,
            btypeid:this.prolist.btypeid,
            sellcolumn:this.prolist.sellcolumn,
            model:this.prolist.model,
            bdcz:this.prolist.bdcz,
            fssd:this.prolist.fssd,
            description:this.prolist.description,
            ptypeid:this.prolist.ptypeid


            
           
          };

          let result = await this.$u.api.product.add(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1000,
              complete: () => {
                //返回上一个界面
                uni.$u.route({
                  type:"redirectTo",
                  url: "/pagesC/product/brank/type/product/index",
                  params:{
                    btypeid:this.btypeid,
                    brand_id:this.brand_id
                  }
                });
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },
  
    async storelist() {
      let data = {
        adminid: this.auth.id,
        stoid: this.auth.stoid,
      };
      let result = await this.$u.api.product.storelist(data);

      if (result.code) {
        this.stolist = result.data;
      }
    },
    async brank() {
      let result = await this.$u.api.product.branks({adminid:this.auth.id,stoid:this.auth.id});

      if (result.code) {
        this.branklist = result.data;
      } else {
        this.$refs.notice.show({
          type: "danger",
          message: result.msg,
        });
      }
    },
   
  },
  computed: {
    btypename() {
      this.btypelist.map((item)=>{
        if(item.id == this.btypeid)
        {
          this.prolist.btypeid = item.id
          this.prolist.btypename = item.name

       
        }
    })
  },
    brandname() {
      this.branklist.map((item)=>{
        if(item.id == this.brand_id)
        {
          this.prolist.brand_id= item.id
          this.prolist.brank.name = item.name

       
        }
    })
  },
    ptypename() {
      this.protypedata.map((item)=>{
        if(item.id == this.ptypeid)
        {
          this.prolist.ptypeid = item.id
          this.prolist.typename_text = item.name

       
        }
    })
  },
  },
  watch:{
    btypeid(val) {
    this.prolist.btypename =  this.btypename;
  },
    brand_id(val) {
    this.prolist.brank.name =  this.btypename;
  },
    ptypeid(val) {
    this.prolist.typename_text =  this.btypename;
  },
  }
 
  
};
</script>
  
<style >
.content {
  padding: 20px;
}

.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.u-form-item__body__left__content__label.data-v-5e7216f1 {
  width: 75px;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}
</style>
  